<template>
<div>
    <div class="head">
        <el-row>
            <el-col :span="3">智能库总数：{{this.dallalg_info.length}}</el-col>
            <el-col :span="3">可用智能库：{{this.usable}}</el-col>
            <el-col :span='18'>
                <div class="button">
                    <el-button type="success" plain @click="upload()">上传智能分析库</el-button>
                </div>
            </el-col>
        </el-row>
    </div>
    <div class="body">
        <el-table :data="dallalg_info" :row-class-name="tableRowClassName" height="100%" style="width: 100%">
            <el-table-column fixed prop="id" label="库编号" :index="indexMethod" width="80"></el-table-column>
            <el-table-column prop="name" label="名称" width="150"></el-table-column>
            <el-table-column prop="version" label="版本" width="100"> </el-table-column>
            <el-table-column prop="url" label="库地址" width="250"></el-table-column>
            <el-table-column prop="sort" label="库类别" width="150" :filter-method="filterHandler" 
            :filter-multiple="false" 
            :formatter="formatName" :filters="[{ text: 'Python', value: '0' }, { text: 'C/C++', value: '1' },{ text: 'java', value: '2' }]"></el-table-column>
            <el-table-column prop="uptime" label="上传时间" width="180"></el-table-column>
            <el-table-column prop="note" label="说明" width="150"></el-table-column>
            <el-table-column prop="useable" label="可用性" :formatter="formatStatus"
             :filter-method="filterHandler" 
            :filter-multiple="false" 
           :filters="[{ text: '可用', value: '1' }, { text: '不可用', value: '0' }]"
             width="80"></el-table-column>
            <el-table-column fixed="right" label="操作" width="220">
                <template slot-scope="scope">
                    <el-button size="mini" type="info" @click="handleEdit(scope.$index, scope.row)">详情</el-button>
                    <el-button size="mini" type="warning" @click="handleWarning (scope.$index, scope.row)" v-if="scope.row.useable==1">禁用</el-button>
                    <el-button size="mini" type="success" @click="handleState (scope.$index, scope.row)" v-else>恢复</el-button>
                    <el-button size="mini" slot="reference" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog title="智能库文件" :modal=false :visible.sync="dialogFormVisibleUpload">
            <el-form :model="uploadform" :inline="true" class="demo-form-inline">
                <el-card class="box-card">
                    <div class="infinite-list" v-infinite-scroll="load">
                        <el-upload class="upload-demo" drag action="/action/upload"  :show-file-list="false" :data="upLoadData" :on-success='successHandle' multiple>
                            <i class="el-icon-upload"></i>
                            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                        </el-upload>
                        <el-form-item label="库名称">
                            <el-input type="text" placeholder="请输入智能库名称" v-model="uploadform.name"></el-input>
                        </el-form-item>
                        <el-form-item label="版本">
                            <el-input type="text" placeholder="请输入智能库版本" v-model="uploadform.version"></el-input>
                        </el-form-item>
                        <el-form-item label="库类别">
                            <el-select v-model="uploadform.sort" placeholder="请选择语言">
                                <el-option v-for="item in dataLangType" :key="item.id" :label="item.value" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>

                        <template>
                            <el-input type="textarea" :rows="2" placeholder="请输入智能库的文件说明" v-model="uploadform.note">
                            </el-input>
                        </template>
                    </div>
                </el-card>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addDallalg()">提交</el-button>
                <el-button @click="dialogFormVisibleUpload = false">返回</el-button>
            </div>
        </el-dialog>
        <el-dialog title="智能库信息" :modal=false :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-card class="box-card">
                    <div class="infinite-list" v-infinite-scroll="load">
                        <el-row>
                            <el-col :span="6">版本</el-col>
                            <el-col :span="2">:</el-col>
                            <el-col :span="10">
                                <template v-if='!modform'> {{form.version}}</template>
                                <template v-else>
                                    <el-input v-model="form.version"></el-input>
                                </template>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="6">库地址</el-col>
                            <el-col :span="2">:</el-col>
                            <el-col :span="10">
                                <template v-if='!modform'>{{form.url}}</template>
                                <template v-else>
                                    <el-input v-model="form.url" disabled></el-input>
                                </template>
                            </el-col>
                        </el-row>
                        <el-row>
                        <el-row>
                            <el-col :span="6">可用性</el-col>
                            <el-col :span="2">:</el-col>
                            <el-col :span="10">
                                <template v-if='!modform'>
                                    <template v-if="form.useable==1">
                                        可用
                                    </template>
                                    <template v-else>
                                        不可用
                                    </template>
                                </template>
                                <template v-else>
                                    <el-select v-model="form.useable" placeholder="请选择状态">
                                        <el-option v-for="item in dallalgStatus" :key="item.id" :label="item.value" :value="item.id">
                                        </el-option>
                                    </el-select>
                                </template>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="6">sort种类</el-col>
                            <el-col :span="2">:</el-col>
                            <el-col :span="10">
                                <template v-if='!modform'>
                                   {{form.sort}}
                                </template>
                                <template v-else>
                                    <el-select v-model="form.sort" placeholder="请选择sort种类">
                                         <el-option v-for="item in dataLangType" :key="item.id" :label="item.value" :value="item.id">
                                            </el-option>
                                    </el-select>
                                </template>
                            </el-col>
                        </el-row>
                            <el-col :span="6">上传时间</el-col>
                            <el-col :span="2">:</el-col>
                            <el-col :span="10">
                                <template v-if='!modform'>{{form.uptime}}</template>
                                <template v-else>
                                    <el-input v-model="form.uptime" disabled></el-input>
                                </template>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="6">智能库名称</el-col>
                            <el-col :span="2">:</el-col>
                            <el-col :span="10">
                                <template v-if='!modform'>{{form.name}}</template>
                                <template v-else>
                                    <el-input v-model="form.name"></el-input>
                                </template>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="6">智能库说明</el-col>
                            <el-col :span="2">:</el-col>
                            <el-col :span="10">
                                <template v-if='!modform'>{{form.note}}</template>
                                <template v-else>
                                    <el-input v-model="form.note"></el-input>
                                </template>
                            </el-col>
                        </el-row>
                    </div>
                </el-card>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <template v-if="!modform">
                    <el-button type="primary" @click="modform =true">点击修改</el-button>
                </template>
                <template v-else>
                    <el-button type="primary" @click="saveModform()">保存修改</el-button>
                </template>
                <el-button @click="dialogFormVisible = false">返回</el-button>
            </div>
        </el-dialog>

    </div>
</div>
</template>

<script>
import axios from '@/plugins/axios' //在哪里用就在哪里引入
export default {
    data() {
        return {
            dallalg_info: [],
            device_db: {},
            search: '',
            dialogFormVisible: false,
            dialogFormVisibleUpload: false,
            uploadurl: '', //上传文件的名字
            upLoadData:{
                "type":'1'
            },
            uploadform: {
                "oper": '2',
                "url": '', //文件名
                'name':'',//智能库名称
                "note": '', //智能库文件说明注释
                "version": '',
                "sort": ''
            },
            dallalgStatus: [{
                    "id": '0',
                    "value": "不可用"
                },
                {
                    "id": '1',
                    "value": "可用"
                }
            ],
            dataLangType: [{
                    "id": '0',
                    "value": 'python'
                },
                {
                    "id": '1',
                    "value": 'C/C++'
                },
                {
                    "id": '2',
                    "value": 'java'
                }

            ],

            modform: false,
            form: {
            },
            formLabelWidth: '120px'
        }
    },
    created: function () {
        //'/action/dllalginfo'假数据地址
        axios.post('/action/dllalg_status').then((res) => {
            this.dallalg_info = res.data.dllalg_info
            console.log('res: ', this.dallalg_info);
        })
    },

    computed: {
        usable(news) {
            var count = 0
            for (let i = 0; i < this.dallalg_info.length; i++) {
                if (this.dallalg_info[i].useable == 1) {
                    count++
                }
            }

            return count
        }
    },
    methods: {
        filterHandler(value, row, column) {
            const property = column['property'];
            return row[property] === value;
        },
        formatStatus: function (row, column) {
            return row.useable == 1 ? '可用' : row.useable == 0 ? '不可用' : '未知';
        },
        formatName: function (row, column) {
            return row.sort == 0 ? 'Python' : row.sort == 1 ? 'C/C++' : 'java';
        },
        indexMethod(index) {
            return index;
        },
        load() {
            this.count = 2;
        },
        upload() {
            this.dialogFormVisibleUpload = true;
        },
        successHandle(response, file, fileList) {
            console.log('response: ', response);
            console.log('fileList: ', fileList);
            console.log('file: ', file);
            console.log(response.result);
            this.uploadform.url = response.result

        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => {});
        },
        //离线浅红，在线浅蓝
        tableRowClassName({
            row,
            rowIndex
        }) {
            if (rowIndex === 1) {
                return 'warning-row';
            } else if (rowIndex === 3) {
                return 'success-row';
            }
            return '';
        },
        Search(index, row) {
            console.log(index, row);
        },
        handleEdit(index, row) {
            this.form = {
                "oper":'3',
                "id": row.id,
                "name": row.name,
                "note": row.note,
                "sort": row.sort,
                "uptime": row.uptime,
                "url": row.url,
                "useable": row.useable,
                "version": row.version
            }

            this.dialogFormVisible = true;
        },
        //恢复
        handleState(index, row) {
            let data={"id":row.id,"oper":'5'}
            axios.post('/action/dllalg_oper',data).then((res)=>{
                if(res.data.code=='1'){
                     this.$message({
                          message: row.name+'恢复成功',
                          type: 'success'
                     });
                    axios.post('/action/dllalg_status').then((res) => {
                        this.dallalg_info = res.data.dllalg_info
                    })
                }else{
                   this.$message.error('恢复失败，请联系管理员！');
                    axios.post('/action/dllalg_status').then((res) => {
                        this.dallalg_info = res.data.dllalg_info
                    })
                }
            })
        },
        //禁用
        handleWarning(index, row) {
            let data={"id":row.id,"oper":'4'}
            axios.post('/action/dllalg_oper',data).then((res)=>{
                if(res.data.code=='1'){
                    this.$message({
                          message: row.name+'禁用成功',
                          type: 'success'
                     });
                    axios.post('/action/dllalg_status').then((res) => {
                        this.dallalg_info = res.data.dllalg_info
                    })
                }else{
                    this.$message.error('禁用失败，请联系管理员！');
                    axios.post('/action/dllalg_status').then((res) => {
                        this.dallalg_info = res.data.dllalg_info
                    })
                }
            })
        },
        handleDelete(index, row) {
            console.log(index, row);
            let data = {
                "oper": '1',
                "id": row.id
            }
            axios.post('/action/dllalg_oper', data).then((res) => {
                if (res.data.code == 1) {
                   this.$message({
                          message: row.name+'删除成功',
                          type: 'success'
                     });
                     axios.post('/action/dllalg_status').then((res) => {
                        this.dallalg_info = res.data.dllalg_info
                    })
                } else {
                    this.$message.error('删除失败，请联系管理员！');
                }
            })
        },
        //添加智能库
        addDallalg() {
            this.dialogFormVisibleUpload = false;
            console.log("上传智能库的文件信息如下！");
            console.log(this.uploadform)
            axios.post('/action/dllalg_oper', this.uploadform).then((res) => {
                if (res.data.code == '1') {
                   this.$message({
                          message:  this.uploadform.name+'上传成功',
                          type: 'success'
                     });
                    axios.post('/action/dllalg_status').then((res) => {
                        this.dallalg_info = res.data.dllalg_info
                    })
                    this.uploadform = {
                        "oper": '2',
                        "url": '', //文件名
                        'name':'',
                        "note": '', //智能库文件说明注释
                        "version": '',
                        "sort": ''
                    }
                }
                if (res.code == '0') {
                     this.$message.error('上传失败，请联系管理员！');
                }
            })
        },

        //修改任务
        saveModform() {
            this.modform = false;
            console.log("修改信息如下!");
            console.log(this.form);
            axios.post('/action/dllalg_oper',this.form).then((res)=>{
                if(res.data.code=='1'){
                     this.$message({
                          message: '修改成功',
                          type: 'success'
                     });
                     axios.post('/action/dllalg_status').then((res) => {
                        this.dallalg_info = res.data.dllalg_info
                    })
                    this.dialogFormVisible = false;
                     this.form={
                            "oper":'3'
                         }
                }else{
                     this.$message.error('修改失败，请联系管理员！');
                }
            })
        }

    }

}
</script>

<style scoped>
.el-table .warning-row {
    background: oldlace;
}

.el-table .success-row {
    background: #f0f9eb;
}

.head {
    position: absolute;
    top: 15%;
    left: 14.5%;
    width: 82%;
    padding: 3px;
    margin: 0px;
    height: 40px;
    line-height: 40px;
    border: 1px solid black;
}

.button {
    position: relative;
    float: right;
}

.body {
    position: absolute;
    top: 23%;
    left: 14.5%;
    width: 82%;
    padding: 3px;
    margin: 0px;
    height: 73%;
    border: 1px solid black;
}
.el-form-item{
    float: left;
}
.el-input{
    width: 200px;
}
.el-select{
    width: 200px;
}
</style>
